<div id="recording-controls">
	<div style="display: none;" data-role="templates-container">

		<!-- RECORDING WIDGET TEMPLATE -->
		<div data-role="recording-template" class="recording in-progress clearfix">
			<div class="swatch-container">
				<div class="swatch"></div>
			</div>
			<!-- <div class="recording-icon" title="Recording in progress. Click to stop.">
				<div class="circle"></div>
			</div> -->
			<div class="recording-label">
				<div class="text">Untitled</div>
				<input type="text" class="text-edit" placeholder="Untitled Recording"/>
				<span class="text-edit-save">&#x23ce;</span>
			</div>
			<div class="btn-group">
				<div data-toggle="dropdown" class="btn btn-flat btn-secondary dropdown-toggle">
					<i class="icon-th-list"></i>
				</div>
				<ul class="dropdown-menu pull-right">
					<!-- auto generated content:
						<li><a href="..."><i class="icon-xxx"/><span>Label!</span></a></li>
					-->
				</ul>
			</div>
			<div class="disabled-overlay"></div>
		</div>

		<!-- COLOR PICKER POPUP CONTENTS -->
		<div data-role="colorpicker-template">
			<div class="picker-wrapper">
				<div class="picker"></div>
				<div class="picker-indicator"></div>
			</div>
			<div class="slider-wrapper">
				<div class="slider"></div>
				<div class="slider-indicator"></div>
			</div>
			<div class="btn-toolbar pull-right">
				<div class="btn-group">
					<a name="cancel" class="btn btn-flat btn-secondary">Cancel</a>
				</div>
				<div class="btn-group">
					<a name="ok" class="btn btn-flat btn-primary">OK</a>
				</div>
			</div>
		</div>
	</div>
	<!-- ^ end of #templates-container ^ -->

	<div class="controls-container">
		<h1>Treemap Legend</h1>
		<div class="recordingsLegend">

			<!-- Activity Ticker -->
			<div class="legend-entry clearfix" id="activity-ticker">

				<div class="swatch-container">
					<div class="swatch" style="background-color: steelblue"></div>
				</div>

				<div class="legend-text">All Activity</div>

				<div class="legend-menu btn-group">
					<div data-toggle="dropdown" class="btn btn-flat btn-secondary dropdown-toggle">
						<i class="fa fa-clock-o"></i>
					</div>
					<ul class="dropdown-menu pull-right">
						<li>
							<a data-ticker-key="all">All Activity</a>
						</li>
						<li>
							<a data-ticker-key="recent/10000">Latest 10 seconds</a>
						</li>
						<li>
							<a data-ticker-key="recent/60000">Latest 60 seconds</a>
						</li>
						<li>
							<a data-ticker-key="recent/120000">Latest 2 minutes</a>
						</li>
						<li>
							<a data-ticker-key="recent/300000">Latest 5 minutes</a>
						</li>
						<li>
							<a data-ticker-key="recent/600000">Latest 10 minutes</a>
						</li>
					</ul>
				</div>
			</div>

			<!-- Overlaps -->
			<div class="legend-entry clearfix">
				<div class="swatch-container" id="overlaps-color-swatch">
					<div class="swatch" style="background-color: blue"></div>
				</div>
				<div class="legend-text">Overlaps</div>
			</div>
		</div>

		<h1>
			Recordings
			<i class="help fa fa-question-circle" title="You can add recordings while the trace is running, and select them to view the methods that were called while they were active."></i>
		</h1>
		<div class="recordingsArea">
			<!-- ADD RECORDING BUTTON -->
			<div class="recording-adder-button">
				<i class="fa fa-plus"></i> Start a Recording
			</div>

			<div class="recordingsList">
				<!-- User-added recordings go here -->
			</div>
		</div>
	</div>

	<div class="controls-menu">
		<div class="menu-button" id="recording-color-resetter">
			<i class="fa fa-tint"></i>
			Reset colors
		</div>
	</div>

</div>